@use "@/common/styles/colors" as *

.authentication-page
  display: flex
  flex-direction: column
  gap: 1rem

  .provider-title
    display: flex
    align-items: center
    gap: 1rem
    justify-content: space-between

  .provider-item
    display: flex
    align-items: center
    justify-content: space-between
    padding: 1rem
    background-color: $dark-gray
    border: 1px solid $gray
    border-radius: 8px
    gap: 1rem

    .left-area
      display: flex
      align-items: center
      gap: 1rem

    .provider-info
      display: flex
      flex-direction: column
      gap: 0.3rem

      h2
        margin: 0
        font-size: 1.2rem
        display: flex
        align-items: center
        gap: 0.5rem

        .internal-badge
          margin: 0
          font-size: 0.8rem
          padding: 0.2rem 0.5rem
          border-radius: 0.5rem
          background-color: $primary-opacity
          color: $primary

      p
        margin: 0
        font-size: 0.9rem
        opacity: 0.7

    .provider-actions
      display: flex
      align-items: center
      gap: 1rem

      .menu
        cursor: pointer
        opacity: 0.7
        transition: opacity 0.2s
        width: 24px

        &:hover
          opacity: 1

      .delete-menu:hover
        color: $error